<template>
    <!-- 每笔订单的信息 -->
    <div>
        <div  v-for="(or,index) in orders" :key="index">
            <el-card style="margin-bottom: 10px;">
            <div slot="header" class="clearfix">
                <span>
                    <span style="padding-left: 30px;">
                        订单号: <span style="font-weight: 600;padding-left: 5px;">{{or[0].orderId}}</span>
                    </span>
                </span>
                <el-button style="float:right" type="danger" size="mini">{{price[index]}}</el-button> 
            </div>
            <div>
                <el-table 
                    :show-header="false" 
                    :data="or"
                    border style="width: 100%">
                    <el-table-column>
                        <template slot-scope="scope">
                            <!-- <div class="item"> -->
                                <el-image class="item-pic" :src="scope.row.produvtImg"></el-image>

                        </template>
                    </el-table-column>
                    <el-table-column align="center">
                        <template slot-scope="scope">
                                    {{scope.row.productName}}
                            <br>
                            <i class="fa fa-user" style="color: #e3e3e3; font-size: 22px;"></i>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center">
                        <template slot-scope="scope">
                            ￥{{scope.row.productPrice}}
                            <div>
                                <el-divider style="margin: 12px 0;"></el-divider>
                                <!-- {{scope.row.payType}} -->
                                x{{scope.row.buyCounts}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center">
                    <template slot-scope="scope">
                            <el-link>￥{{scope.row.buyCounts * scope.row.productPrice}}</el-link> <br>
                        </template> 
                    </el-table-column>
                </el-table>
            </div>   
        </el-card>
       
        </div>
         <div v-html="alipays" ref="alipayWap"></div>
    </div>
</template>
<script>

// import axios from 'axios'
import http from "../../core/HttpRequest"
export default {
    data: () => ({
        tempViewPageImg: true,
        centerDialogVisible: false,
        html: "",
        options: null,
        number: '',
        name:'',
        wxprice: '',
        userId:0,
        showflag:false,
        orderItem:[],
        orders:[],
        price:[],
        a:0,
        alipays:""
    }),
    mounted:function(){
        let uname =this.$cookies.get("username")
        this.name = uname
         let username = new URLSearchParams()
         username.append('userName',this.name),
          http({
              method: "post",
              url: `/orderNum/id`,
              data: username
          })
        .then(res => {
            // alert("success")
            // alert(res.data.data)
            this.userId=res.data.data
                //根据id去查询
        let param = new URLSearchParams()
         param.append('userId', this.userId),
            http({
                method: "post",
                url: `/order/allOrder`,
                data: param
            })
            .then(res=> {
                // alert("success");
                console.log(res.data.data[0]);
                this.orders=res.data.data
                this.showflag=true
                for(var i=0;i<res.data.count;i++){
                    // alert(this.orders[i].length)
                    for(var j = 0;j<this.orders[i].length;j++){
                        this.a+=this.orders[i][j].totalAmount
                    }
                    this.price[i]=this.a
                    this.a=0
                }
                
            }) 
         })
    },
}
</script>

<style >
</style>